<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<style>
    *{
        overflow: auto;
    }
    #border{
        height: 100%;
        background-color: white;
    }
    .top{
        border-bottom: 1px solid #EFEFEF;
        padding: 15px;
    }
    #center{
        width: 100%;
        height: 100%;
    }
    .center1{
        margin-top: 5px;
        padding: 15px;
    }
    .center2{
        background-color: #FAFAFA;
        border-bottom: 1px solid #EFEFEF;
        border-top: 1px solid #EFEFEF;
        padding: 15px 30px;
    }
    .center3{
        padding: 15px 60px;
    }
    .center4{
        float: left;
        padding-right: 20px;
    }
    .btn{
        padding: 13px 30px;
    }
    .btn div{
        width: 30px;
        border-radius: 3px;
        background-color: #24BBBA;
        font-size: 14px;
        color: white;
        padding: 8px 10px;

    }
</style>
<body>
<div id = "border">
    <div class="top">
        <div><b>管理员权限管理</b></div>
    </div>

    <div id="center">
        <div class="center1"><input type="checkbox" value="M01" />&nbsp;&nbsp;全选</div>
            <div class="center2"><input type="checkbox" value="M0101" />&nbsp;&nbsp;用户信息管理</div>
                <div class="center3">
                    <div class="center4"><input type="checkbox" value="M010101" />&nbsp;&nbsp;银行卡</div>
                    <div class="center4"><input type="checkbox" value="M010102" />&nbsp;&nbsp;个人征信</div>
                    <div class="center4"><input type="checkbox" value="M010103" />&nbsp;&nbsp;用户信息</div>
                </div>
            <div class="center2"><input type="checkbox" value="M0102" />&nbsp;&nbsp;理财产品管理</div>
                <div class="center3">
                    <div class="center4"><input type="checkbox" value="M010201" />&nbsp;&nbsp;零钱理财</div>
                    <div class="center4"><input type="checkbox" value="M010202" />&nbsp;&nbsp;工资理财</div>
                    <div class="center4"><input type="checkbox" value="M010203" />&nbsp;&nbsp;期限理财</div>
                    <div class="center4"><input type="checkbox" value="M010204" />&nbsp;&nbsp;基金理财</div>
                    <div class="center4"><input type="checkbox" value="M010205" />&nbsp;&nbsp;银行理财</div>

                </div>
            <div class="center2"><input type="checkbox" value="M0103" />&nbsp;&nbsp;权限管理</div>
                <div class="center3">
                    <div class="center4"><input type="checkbox" value="M010301" />&nbsp;&nbsp;用户权限</div>
                    <div class="center4"><input type="checkbox" value="M010302" />&nbsp;&nbsp;管理员权限</div>
                </div>
            <div class="center2"><input type="checkbox" value="M0104" />&nbsp;&nbsp;网贷管理</div>
                <div class="center3">
                    <div class="center4"><input type="checkbox" value="M010401" />&nbsp;&nbsp;网贷审核</div>
            </div>
    </div>
    <div class="btn">
        <div>提交</div>
    </div>

</div>
</body>
<script>
    $(":checkbox").click(
        function(){
            let curValue = $(this).val();
            checkCd(curValue);
            checkPt(curValue);
        }
    )
    function checkCd(curValue){
        let curElement = $(":checkbox[value="+curValue+"]");
        let cdElement = $(":checkbox[value^="+curValue+"]");
        cdElement.prop("checked",curElement.prop("checked"));
    }
    function checkPt(curValue){
        if(curValue.length<=3) return;
        let curElement = $(":checkbox[value="+curValue+"]");//获取当前元素
        let ptValue = curValue.substr(0,curValue.length-2); //获取父元素的value属性
        let ptElement = $(":checkbox[value="+ptValue+"]");  //获取父类元素
        if(curElement.prop("checked")==true){
            let checkBox = $(":checkbox[value^="+ptValue+"]");//获取子类所有的checkbox
            let selectCheckBox = $(":checkbox[value^="+ptValue+"]:checked");//获取选中的子类checkbox
            if ((checkBox.size()-1)==selectCheckBox.size()){
                ptElement.prop("checked",true);
            }
        }else{
            let checkBox = $(":checkbox[value^="+curValue+"]");
            let selectCheckBox = $(":checkbox[value^="+curValue+"]:checked");
            if (checkBox.size()==selectCheckBox.size()){
                ptElement.prop("checked",true);
            }else {
                ptElement.prop("checked",false);
            }
        }
        checkPt(ptValue);
    }
</script>
</html>